<template>
    <div class="icons">
        <div class="icon" v-for="item in iconsList" :key="item.id">
              <img :src="item.imgUrl" alt="">
              <p class="pp">{{item.text}}</p>
        </div>
        <div class="swiper">
            <swiper :options="swiperOption" >
                <swiper-slide v-for="(page,index) in pages" :key="index"> 
                    <div class="icon" v-for="item in page" :key="item.id">
                        <img :src="item.imgUrl" alt="">
                        <p class="pp">{{item.text}}</p>
                    </div>
                </swiper-slide>
            </swiper>
        </div>
    </div>
</template>

<script>
    export default {
        name:'HomeIcons',
        data(){
            return {
                swiperOption:{},
                iconsList:[
                    {
                        id:"001",
                        imgUrl:"//s.qunarzz.com/vacation_react/around/entry2_2.png",
                        text:"一日游"
                    },
                    {
                        id:"002",
                        imgUrl:"//s.qunarzz.com/vacation_react/around/entry3.png",
                        text:"周边游"
                    },
                    {
                        id:"003",
                        imgUrl:"//s.qunarzz.com/vacation_react/around/entry5.png",
                        text:"跟团游"
                    },
                    {
                        id:"004",
                        imgUrl:"//s.qunarzz.com/vacation_react/around/entry4.png",
                        text:"景点门票"
                    }                  
                ],
                zhuti:[{
                        id:"001",
                        imgUrl:"https://imgs.qunarzz.com/vc/77/21/6b/64a35f4ab3ab1fad57731edb3d.png_92.png",
                        text:"高空游玩"
                    },
                    {
                        id:"002",
                        imgUrl:"https://imgs.qunarzz.com/vc/fd/55/94/6c7152c2a8b35a9c49bb26ea25.png_92.png",
                        text:"主题游"
                    },
                    {
                        id:"003",
                        imgUrl:"https://imgs.qunarzz.com/vc/c3/f2/54/2e1c8f9403de1ed28895c9ffa4.png_92.png",
                        text:"亲子游"
                    },
                    {
                        id:"004",
                        imgUrl:"https://imgs.qunarzz.com/vc/eb/d9/1b/e24bca3f1ef6ae6ebdee15e4ca.png_92.png",
                        text:"徒步登山"
                    },
                    {
                        id:"005",
                        imgUrl:"https://imgs.qunarzz.com/vc/c8/01/32/8f6e29b7b6ce0a807742c2587a.png_92.png",
                        text:"深度游"
                    },
                    {
                        id:"006",
                        imgUrl:"https://imgs.qunarzz.com/vc/68/4a/91/b7f09964d1e7a6280cca361c46.png_92.png",
                        text:"潜水"
                    },
]
            }
        },
        computed:{
            pages(){
                const pages=[];
                this.zhuti.forEach((item,index)=>{
                    const page=Math.floor(index/4)
                    if(!pages[page]){
                        pages[page]=[]
                    }
                    pages[page].push(item)
                })
                return pages
            }
        }
    }
</script>

<style lang="stylus" scoped>
@import "~styles/varibles.styl";
@import "~styles/mixins.styl"
.wrapper >>> swiper-slide{
     width:25vw
}
   .icons{
       height :40vw;
       overflow hidden;
       .icon{
           width :25%;
           height :50%;
           box-sizing :border-box;
           float:left;
           overflow hidden;
           text-align center;
           padding-top:0.3rem;
           color:$darkTextColor;
           img{
               width:.88rem
           }
       }
   }
   .swiper{
       width:100vw;
       overflow hidden;
       height :50%;
       swiper-slide{
           width:25vw
       }
   }
   .pp{
       overflow hidden;
       white-space:nowrap;
       ellipsis()
   }
</style>